<template>
  <el-dialog :visible.sync="visible" :title="$t('device.DeviceSetting')" :highlight-current-row="!multiple"
    width="800px">
    <el-table ref="table" :data="list" row-key="userId" @select="handleSelect">
      <el-table-column type="index" />
      <el-table-column type="selection" />
      <el-table-column width="60">
        <template slot-scope="{row}">
          <img class="row-user-avatar" :src="avatar(row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('user.NickName')" prop="nickName" min-width="100" />
      <el-table-column :label="$t('user.Username')" prop="userName" min-width="120" />
      <el-table-column :label="$t('user.Mobile')" prop="phonenumber" width="120" />
      <el-table-column :label="$t('user.Email')" prop="email" min-width="120" />
    </el-table>
    <el-pagination :current-page="query.pageNo" :page-size="query.pageSize" :total="total" @page-change="queryList" />
    <div slot="footer">
      <el-button type="info" @click="visible = false">{{ $t('Close') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import systemUserAPI from '@/api/system/user'
  import userDeviceAPI from '@/api/device/user-device'
  import settings from '@/settings'
  import {
    listToMap
  } from '@/utils'
  export default {
    name: 'UserDeviceSelect',
    data() {
      return {
        query: {
          code: null,
          name: null,
          pageSize: 10,
          pageNo: 1
        },
        total: 0,
        device: {},
        deviceUsers: [],
        userMap: {}
      }
    },
    created() {},
    methods: {
      avatar(item) {
        return item.avatar ? `${settings.baseUrl}${item.avatar}` : require(`@/assets/images/none.png`)
      },
      loadList(data) {
        this.list = data.rows
        this.total = data.total;
        this.map = listToMap(this.list, this.valueKey);
      },
      queryOther() {
        this.loadPermission()
      },
      loadPermission() {
        const vm = this
        userDeviceAPI.list({
          deviceId: this.device.id
        }).then(res => {
          vm.deviceUsers = res.data
          vm.userMap = Object.assign({}, listToMap(res.data, 'userId'))
          vm.$refs['table'].clearSelection()
          setTimeout(vm.setChecked, 200)
        })
      },
      setChecked() {
        const {
          list,
          userMap,
          multiple
        } = this
        for (var i = 0; i < list.length; i++) {
          if (userMap[list[i].userId]) {
            this.$refs['table'].toggleRowSelection(list[i], true)
            if (!multiple) {
              return
            }
          }
        }
      },
      requestList(pageNo) {
        this.query.pageNo = pageNo || this.query.pageNo
        return systemUserAPI.listUser(this.currentQuery(this.query))
      },
      handleSelect(selections, current) {
        const checked = selections.filter(item => item.userId === current.userId).length > 0;
        if (!this.multiple) {
          this.$refs['table'].clearSelection()
          this.$refs['table'].toggleRowSelection(current, true)
          if (!checked) {
            return
          }
          userDeviceAPI.create({
            deviceId: this.device.id,
            userId: current.userId
          })
          return
        }

        if (checked) {
          userDeviceAPI.create({
            deviceId: this.device.id,
            userId: current.userId
          })
          return
        }
        userDeviceAPI.deleteOne({
          deviceId: this.device.id,
          userId: current.userId
        })
      }
    }
  }

</script>
